{% extends 'base.html' %}


{% block content %}
    <div class="row  border-bottom white-bg dashboard-header">
        <button class="btn btn-primary" type="button" onclick="location.href='/newtask'">
            <i class="fa fa-plus"></i>
            创建任务
        </button>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>创建新的爬虫任务</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="form_basic.html#">选项1</a>
                            </li>
                            <li><a href="form_basic.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form id="task-form" class="form-horizontal">
                        {% csrf_token %}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务名称</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">目标站点</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="urllist">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">选择模板</label>
                            <div class="col-sm-10">
                                <select class="form-control m-b" name="model">
                                    {% for case in CaseItems %}
                                        <option value="{{ case.cid }}">{{ case.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">爬虫策略</label>

                            <div class="col-sm-10">
                                <div class="checkbox i-checks">
                                    <label>
                                        <input type="checkbox" name="delay" checked=""> <i></i> 访问延迟</label>
                                </div>
                                <div class="checkbox i-checks">
                                    <label>
                                        <input type="checkbox" name="setua" checked=""> <i></i> 动态UA</label>
                                </div>
                                <div class="checkbox i-checks">
                                    <label>
                                        <input type="checkbox" name="proxy"> <i></i> 代理IP</label>
                                </div>
                                <div class="checkbox i-checks">
                                    <label>
                                        <input type="checkbox" name="jsexcute"> <i></i> 解析JS</label>
                                </div>

                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">运行周期</label>
                            <div class="col-sm-10">

                                <input type="text" id="ionrange_time" name="time" class="form-control">
                                <span class="help-block m-b-none">设置爬虫周期性运行的时间间隔</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">节点数量</label>

                            <div class="col-sm-10">

                                <div class="col-sm-2">
                                    <div class="m-r-md inline">
                                        <input type="text" name="urlspider" value="2" id="urlspider-count"
                                               class="dial m-r-sm" data-fgColor="#1AB394"
                                               data-width="130" data-height="130" data-min="0" data-max="20"/>
                                    </div>
                                    <label style="padding-left: 40px">URL爬虫</label>
                                </div>
                                <div class="col-sm-2">
                                    <div class="m-r-md inline">
                                        <input type="text" name="dataspider" value="10" id="dataspider-count"
                                               class="dial m-r-sm" data-fgColor="#1AB394"
                                               data-width="130" data-height="130" data-min="0" data-max="50"/>
                                    </div>
                                    <label style="padding-left: 40px">DATA爬虫</label>
                                </div>
                                <div class="col-sm-2">
                                    <div class="m-r-md inline">
                                        <input type="text" name="redis" value="1" id="redis-count" class="dial m-r-sm"
                                               data-fgColor="#1AB394"
                                               data-width="130" data-height="130" data-min="0" data-max="5"/>
                                    </div>
                                    <label style="padding-left: 40px">Redis队列</label>
                                </div>
                                <div class="col-sm-2">
                                    <div class="m-r-md inline">
                                        <input type="text" name="mongo" value="1" id="mongo-count" class="dial m-r-sm"
                                               data-fgColor="#1AB394"
                                               data-width="130" data-height="130" data-min="0" data-max="5"/>
                                    </div>
                                    <label style="padding-left: 20px">Mongo数据库</label>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <a onclick="submitTask();" class="btn btn-primary" style="margin-left: 45%">提交</a>
                    </form>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block style %}

    <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/static/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="/static/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">

{% endblock %}

{% block script %}

    <!-- iCheck -->
    <script src="/static/js/plugins/iCheck/icheck.min.js"></script>

    <!-- IonRangeSlider -->
    <script src="/static/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>

    <!-- JSKnob -->
    <script src="/static/js/plugins/jsKnob/jquery.knob.js"></script>

    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            $("#ionrange_time").ionRangeSlider({
                min: 1,
                max: 10,
                step: 1,
                type: 'single',
                postfix: "天",
                grid: true
            });


            $(".dial").knob();


        });

        function submitTask() {
            swal({
                title: '确认新建任务？',
                text: "创建将立即生效，请确保参数无误。",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '创建',
                cancelButtonText: '取消'
            }).then(function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: "POST",
                        url: "/newtask/",
                        data: $('#task-form').serialize(),
                        async: false,
                        success: function () {
                            swal(
                                '创建成功！',
                                '爬虫任务已经保存入库。',
                                'success'
                            );
                            location.href = "/taskcenter/#!/taskCenter";
                        }
                    })
                }
            });

        };
    </script>

{% endblock %}